<template>
    <div class="content-bg">
      <page-header v-if="$route.meta.global_header"/>
      <!--一级目录-->
      <div class="first-nav">
        <div  class="container">
          <ul>
            <router-link tag="li" to="/home">
              <a href="javascript:void(0)">首页</a>
            </router-link>
            <router-link tag="li" to="/notice">
              <a href="javascript:void(0)">通知公告</a>
            </router-link>
            <router-link tag="li" to="/tax">
              <a href="javascript:void(0)">我要办税</a>
            </router-link>
            <router-link tag="li" to="/guide">
              <a href="javascript:void(0)">向导办税</a>
            </router-link>
          </ul>
          <!--搜索-->
          <el-input class="first-input" suffix-icon="el-icon-search" v-model="input" placeholder="请输入内容"></el-input>
        </div>

      </div>

       <breadcrumb base="当前位置" v-if="$route.meta.breadcrumb"/>
      <!--正式内容显示的位置-->
      <div class="content container">
        <router-view/>
      </div>

      <page-footer v-if="$route.meta.global_footer"/>
    </div>
</template>

<script>
  import Vue from 'vue'
  import pageHeader from "./common/Header.vue"
  import PageFooter from './common/Footer.vue'
  import HelloWorld from './HelloWorld.vue'
  import Apple from './Apple.vue'
  import Banana from './Banana.vue'
  import types from '../store/types'
    export default {
        name: 'PageMain',
        data() {
            return {
              input: '',
              value:'',
//              checkAll:false,
              checkedCities:[],
              checkedSub:[],
              cities:['上海', '北京', '广州', '深圳'],
              myBox:[],
                List:[
                  {name:'apple',price:34},
                  {name:'banana',price:56},
                ],
              obList:{
                name:'apple',
                price:34,
                color:'red',
                weight:14
              },
              subject:[
                {id:1,name:'语文'},
                {id:2,name:'数学'},
                {id:3,name:'英语'}
              ],
              selectedSubject:[],
              number:'父组件传递给子组件的值',
              show:true,

            }
        },
        methods: {
          addItem(){
              let vm =this
//            vm.List.push(
//              {name:'pinaapple',price:100}
//            )
            /*给列表赋值，列表是不会改变*/
//            vm.List[1]={
//              name:'pinaapple',
//              price:100
//            }
//            我们有另外一种方法来给改变列表
           Vue.set(vm.List,1,{
              name:'pinaapple',
              price:100
            })
          },
          myEvent(parmfromA){
             console.log('myEvent'+parmfromA)
          },
//          /*全选方法*/
          handleCheckAllChange(){
            let vm =this
            vm.checkedCities=vm.checkAll ?  [] : vm.cities
          },
//          全选学科
          handleCheckAllSubject(){
            let vm =this
            vm.checkedSub=vm.checkAllSub ? [] :vm.subject.map(a=>a.id)
          },
          handleCheckedCitiesChange(){

          },

        },
        computed: {
          checkAll(){
            let vm =this
            return vm.checkedCities.length == vm.cities.length
          },
          checkAllSub(){
            let vm =this
            return vm.checkedSub.length == vm.subject.length
          },
          totalPrice(){
            let vm =this
//            return vm.$store.state.totalPrice //这是直接从state中获取
            return vm.$store.getters[types.GETTERS.getTotal] //这是从getters中获取
          }

        },
        created() {
            const vm = this
        },
      mounted () {
          let vm =this
          vm.$watch('checkedSub',function(){
              vm.selectedSubject=vm.subject.filter(sub=>vm.checkedSub.indexOf(sub.id)!=-1)
          },{deep:true})


      },
      components:{
        pageHeader,
        PageFooter,
        HelloWorld,
        Apple,
        Banana,
        Breadcrumb:resolve=>require(['./common/Breadcrumb.vue'],resolve)

      }
    }
</script>

<style>
  /*触发列表的更新的几种方法*/
  /*push() pop() shift() unshift() splice() sort() reverse()*/
  /*不能触发列表更新的几种方法*/
  /*filter() contact() slice()*/
  /*给其中某一项赋值*/
  /*vm.item[indexOfItem] = newValue*/
  /*gai*/
  /*vm.items.length=newLength*/
</style>

